<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport">
    <meta content="telephone=no,email=no,address=no" name="format-detection">
    <meta content="on" http-equiv="x-dns-prefetch-control">
    <meta name="renderer" content="webkit" />
    <meta name="keyword" content="" />
    <meta name="description" content="" />
    <title>feiling</title>
    <link rel="stylesheet" href="../../asset/vendor/video/video-js.min.css">
    <link rel="stylesheet" href="../../asset/css/main.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../asset/vendor/html5shiv.min.js"></script>
    <script src="../../asset/vendor/respond.min.js"></script>
    <script>
        alert("您的浏览器版本过低请升级！");
        location.href = "http://outdatedbrowser.com/zh-cn";
    </script>
    <![endif]-->
</head>
<body>
<!---header--->
<header id="header" class="header">
    <ul>
        <li class="special first">
            <a href="index.html">
                <img src="../../asset/images/basic/litter-title.png" alt="">
            </a>
        </li>
        <li class="active">
            <a href="">People</a>
        </li>
        <li>
            <a href="">Products</a>
        </li>
        <li>
            <a href="">Story</a>
        </li>
        <li>
            <a href="">News</a>
        </li>
        <li>
            <a href="">Contact</a>
        </li>
        <li class="special last">
            <a id="searchBtn" href="javascript:;"></a>
        </li>
    </ul>
</header>
<div class="people">
    <div class="people-cont">
        <div class="people-item">
            <div class="people-item-img">
                <img src="../../asset/images/human-02.png" alt="">
            </div>
            <div class="people-item-text">
                <div class="head">A perfect purchase!!!</div>
                <div class="cont">
                    people text description people text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text description
                </div>
            </div>
        </div>
        <div class="people-item people-item-even">
            <div class="people-item-text">
                <div class="head">A perfect purchase!!!</div>
                <div class="cont">
                    people text description people text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text description
                </div>
            </div>
            <div class="people-item-img">
                <img src="../../asset/images/human-02.png" alt="">
            </div>
        </div>
        <div class="people-item">
            <div class="people-item-img">
                <img src="../../asset/images/human-02.png" alt="">
            </div>
            <div class="people-item-text">
                <div class="head">A perfect purchase!!!</div>
                <div class="cont">
                    people text description people text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text description
                </div>
            </div>
        </div>
        <div class="people-item people-item-even">
            <div class="people-item-text">
                <div class="head">A perfect purchase!!!</div>
                <div class="cont">
                    people text description people text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text description
                </div>
            </div>
            <div class="people-item-img">
                <img src="../../asset/images/human-02.png" alt="">
            </div>
        </div>
        <div class="people-item">
            <div class="people-item-img">
                <img src="../../asset/images/human-02.png" alt="">
            </div>
            <div class="people-item-text">
                <div class="head">A perfect purchase!!!</div>
                <div class="cont">
                    people text description people text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text description
                </div>
            </div>
        </div>
        <div class="people-item people-item-even">
            <div class="people-item-text">
                <div class="head">A perfect purchase!!!</div>
                <div class="cont">
                    people text description people text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text description
                </div>
            </div>
            <div class="people-item-img">
                <img src="../../asset/images/human-02.png" alt="">
            </div>
        </div>
        <div class="people-item">
            <div class="people-item-img">
                <img src="../../asset/images/human-02.png" alt="">
            </div>
            <div class="people-item-text">
                <div class="head">A perfect purchase!!!</div>
                <div class="cont">
                    people text description people text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text description
                </div>
            </div>
        </div>
        <div class="people-item people-item-even">
            <div class="people-item-text">
                <div class="head">A perfect purchase!!!</div>
                <div class="cont">
                    people text description people text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text descriptionpeople text description
                </div>
            </div>
            <div class="people-item-img">
                <img src="../../asset/images/human-02.png" alt="">
            </div>
        </div>
    </div>
    <div id="peopleBg" class="people-bg"></div>
</div>
<div class="send-msg">
    <a href="javascript:;" id="sendMsgBtn">
        <div class="icon"></div>
        <div class="text">send us your experience</div>
    </a>
</div>
<!---搜索--->
<div id="search" class="search">
    <div class="search-cont">
        <form class="search-from">
            <input type="text">
            <button class="search-btn">搜索</button>
        </form>
        <div class="search-list" id="search-list">
            <div id="scrollList">
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<!--返回顶部-->
<a href="javascript:;" id="to-top"></a>
<!---上传信息--->
<div class="modal-upload" id="uploadModal">
    <div class="upload">
        <div class="upload-cont">
            <div class="upload-cont-title">
                <span>Send your experience</span>
            </div>
            <div class="upload-cont-btn-notice">
                <div class="upload-btn">
                    <a href=""></a>
                </div>
                <div class="upload-notice">
                    <div class="top">Please write your name and review</div>
                    <div class="bottom">
                        this is some attention
                        this is some attention
                        this is some attention
                        this is some attention
                        this is some attention
                        this is some attention
                    </div>
                </div>
            </div>
            <!---这个显示上传成功后图片名称列表 start--->
            <div class="upload-cont-img-list">
                <ul>
                    <li>
                        <span>wechart901258.jpg</span><a class="deleteUploadImg" href="javascript:;">&times;</a>
                    </li>
                    <li>
                        <span>wechart901258.jpg</span><a class="deleteUploadImg" href="javascript:;">&times;</a>
                    </li>
                    <li>
                        <span>wechart901258.jpg</span><a class="deleteUploadImg" href="javascript:;">&times;</a>
                    </li>
                </ul>
            </div>
            <div class="upload-cont-form">
                <!---这个显示上传进度 start--->
                <div class="upload-percent">
                    <div class="upload-percent-text">
                        uploading... 77%
                    </div>
                    <div class="upload-percent-scale">
                        <div style="width: 56%" id="scale"></div>
                    </div>
                </div>
                <!---这个显示上传进度 end--->
                <div class="upload-form-item">
                    <div class="label">Name</div>
                    <div class="form-input">
                        <input id="name" type="text" class="form-control form-control-text" />
                    </div>
                </div>
                <div class="upload-form-item">
                    <div class="label">review</div>
                    <div class="form-input">
                        <textarea id="review" name="" class="form-control form-control-area"></textarea>
                    </div>
                </div>
                <div class="upload-form-item upload-form-item-btn">
                    <input class="submit-btn" type="submit" value="Submit">
                </div>
            </div>
        </div>
        <div id="uploadMask" class="upload-mask">
            <a class="close" href="javascript:;">&times;</a>
            <div id="confirmIsCloseModel" class="confirm-close">
                <div class="text">
                    Confirmation for Deleting Previous Uploads?
                </div>
                <div class="btn">
                    <a id="confirmIsCloseModelBtn" href="javascript:;">Confirm</a>
                </div>
                <a id="closeConfirmCloseBtn" class="closeConfirmCloseBtn" href="javascript:;">Close</a>
            </div>
        </div>
    </div>
</div>
<script src="../../asset/vendor/jquery.min.js"></script>
<script src="../../asset/vendor/video/video.min.js"></script>
<script src="../../asset/vendor/jquery.slimscroll.min.js"></script>
<script src="../../asset/js/main.js"></script>
<script>
    $(function(){




        /***
         *
         * 上传可以使用  webuploader
         * 程序要是不明白的话，可以问我
         * 上传过程动态的添加
         *
         * uploadImgList  是保存上传成功后的图片
         *
         * 重写 .upload-cont-img-list 的 html
         *
         * 上传过程中更新  #scale 的宽度
         *
         * 多图上传 上传成功后  将 #scale的宽度置为 0
         *
         *
         *
         * ***/






        var uploadModal = $("#uploadModal");
        var uploadImgList = [];  //保存上传成功的图片信息数组
        $("#sendMsgBtn").on("click",function(){
            uploadModal.fadeIn();
            $("body").addClass("hidden");
        });

        //点击mask关闭modal
        $("#uploadMask").on("click",function(){
            if( formValid() ){  //有有效数据弹出确认框
                $("#confirmIsCloseModel").stop().animate({
                    right:15,
                    opacity:1
                },400);
            }else{  //没有直接关闭
                modelClose();
            }
            return false;
        });

        //确认关闭modal函数
        $("#confirmIsCloseModelBtn").on("click",function(){
            modelClose();
        });

        //取消关闭modal的函数
        $("#closeConfirmCloseBtn").on("click",function(){
            $("#confirmIsCloseModel").stop().animate({
                right:-270,
                opacity:0
            },400);
            return false;
        });


        //关闭modal函数
        function modelClose(){
            uploadModal.hide();
            $("body").removeClass("hidden");
            $("#confirmIsCloseModel").css({
                right:-270,
                opacity:0
            })
        }

        //返回是否已经有有效数据
        function formValid(){
            return uploadImgList.length>0 || $("#name").val() || $("#review").val()
        }


        //上传成功后删除图片
        var deleteUploadImgBtn = $(".deleteUploadImg");
        deleteUploadImgBtn.each(function(index){
            $(this).on("click",function(){
                uploadImgList.splice(index,1);
                //这里再去更新 .upload-cont-img-list 的 html
            })
        })

    });

</script>
</body>
</html>